import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import {
  Button,
  Divider,
  message,
  Input,
  Drawer,
  Table,
  Tabs,
  Card,
  Modal,
  AutoComplete,
} from 'antd';
import React, { useState, useRef } from 'react';

import { useIntl, FormattedMessage, history, Link } from 'umi';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { createNameSpace, getNameSpaceList, deleteNameSpace, getNameSpaceDetail } from './service';
import format from '@/utils/format';
import './namespace.less';

const NameSpace = (props) => {
  const [showNameSpace, setShowNameSpace] = useState(false);
  const [newNameSpace, setNewNameSpace] = useState('');
  const intl = useIntl();
  const [tab, setTab] = useState(props.location.query.tab);
  const handleTabChange = (value) => {
    setTab(value);
    history.push(`/application?tab=${value}`);
  };
  const columns = [
    {
      title: React.$i18n('命名空间名称'),
      dataIndex: 'name',
    },
    {
      title: React.$i18n('镜像个数'),
      dataIndex: 'imageNum',
    },
    {
      title: React.$i18n('更新时间'),
      dataIndex: 'createAt',
      render: (text) => {
        return <span>{format(text)}</span>;
      },
    },
    {
      title: React.$i18n('操作'),
      render(text, record) {
        return (
          <>
            <Button
              danger
              type="link"
              onClick={() => {
                const id = record.id;
                deleteNameSpace(id).then((res) => {
                  console.log(res);
                  if (res.code === 0) {
                    ref.current.reload();
                  }
                });
              }}
            >
              删除
            </Button>
          </>
        );
      },
    },
  ];

  function onSearch() {}
  function addNewNameSpace(e) {
    let newName = newNameSpace;
    console.log(newName);
    if (newName) {
      createNameSpace({ namespace: newName }).then((res) => {
        if (res.code === 0) {
          setNewNameSpace('');
          setShowNameSpace(false);
          ref.current.reload();
        }
      })
    } else {
      message.error('请输入命名空间名称');
    }
    //
    // ref.current.reload()
  }

  const ref = React.useRef();

  return (
    <div className="name-space">
      <PageContainer>
        <Card bodyStyle={{ padding: '0 16px' }}>
          <ProTable
            options={false}
            actionRef={ref}
            search={false}
            rowKey={(r) => r.id}
            style={{ justifyContent: 'flex-start' }}
            cardProps={{
              bodyStyle: { padding: 0 },
            }}
            request={async (params, sorter, filter) => {
              const res = await getNameSpaceList({
                pageNum: params.current,
                pageSize: params.pageSize,
              });
              if (res.code === 0) {
                return {
                  data: res.data.imageNamespaces,
                  success: true,
                  total: res.data.total,
                };
              }
            }}
            toolBarRender={() => [
              <div>
                {!showNameSpace && (
                  <Button
                    type="primary"
                    onClick={() => {
                      setShowNameSpace(true);
                    }}
                  >
                    创建命名空间
                  </Button>
                )}
                {showNameSpace && (
                  <div className="new-namespace">
                    <div style={{ width: '130px' }}>命名空间:</div>
                    <Input
                      onChange={(e) => setNewNameSpace(e.target.value)}
                      style={{ marginRight: '10px' }}
                      placeholder="请输入命名空间名称"
                    />
                    <Button
                      type="primary"
                      onClick={() => addNewNameSpace()}
                      style={{ marginRight: '10px' }}
                    >
                      确认
                    </Button>
                    <Button
                      onClick={() => {
                        setShowNameSpace(false);
                      }}
                    >
                      取消
                    </Button>
                  </div>
                )}
              </div>,
            ]}
            columns={columns}
          />
        </Card>
      </PageContainer>
    </div>
  );
};

export default NameSpace;
